<template>
  <el-icon><HomeFilled /></el-icon>
  <el-breadcrumb separator="/">
    <!-- <el-breadcrumb-item :to="{ path: '/' }">
      
      <span>首页</span>
    </el-breadcrumb-item> -->

    <template v-for="breadcrumb in breadcrumbs">
      <el-breadcrumb-item
        :to="{ path: breadcrumb.name }"
        @click.stop="handleClick(breadcrumb)"
        >{{ breadcrumb.title }}</el-breadcrumb-item
      >
    </template>
  </el-breadcrumb>
</template>

<script>
import { computed, ref } from "vue";
import store from "../store";
import { useRouter } from "vue-router";
import { HomeFilled } from "@element-plus/icons-vue";

export default {
  components: {
    HomeFilled,
  },
  setup() {
    const router = useRouter();
    const breadcrumbs = computed(() => store.state.editableTabs);
    const handleClick = (breadcrumb) => {
      store.commit("ALERT_TABS", [store.state.editableTabs, breadcrumb.name]);
      router.push(breadcrumb.name);
    };
    return { breadcrumbs, handleClick };
  },
};
</script>
